
<template>
<!-- 产品详情 -->
  <div class="ProductDetail">
   
 <div class="side_1">
 </div>
      <span class="add_1">
    产品详情
 </span>
 <el-button type="info" icon="el-icon-back" class="btn_fanhui" @click="Fh">返回</el-button>
 <div class="content">

 
   <div class="head">
     <div class="lt">
          <span> 产品信息</span>
        </div>
        <div class="form_pro">
               <el-row :gutter="10">
            <el-col :span="5">
         <el-form :model="formInlines" class="demo-form-inline" label-width="80px">
       
              <el-form-item label="产品名称">
              <el-input v-model="formInlines.productname"></el-input>
            </el-form-item>
         </el-form>
            </el-col>
                            <el-col :span="5">
         <el-form :model="formInlines" class="demo-form-inline" label-width="80px">
               <el-form-item label="产品编号">
              <el-input v-model="formInlines.productno"></el-input>
            </el-form-item>
         </el-form>
                </el-col>
                       <el-col :span="8">
         <el-form  :model="formInlines" class="demo-form-inline" label-width="80px">
              <el-form-item label="产品类型" >
  <el-input v-model="formInlines.producttype"></el-input>
            </el-form-item>
         </el-form>
             </el-col>
                                <el-col :span="5">
         <el-form  :model="formInlines" class="demo-form-inline" label-width="80px">
                         <el-form-item label="产品型号">
              <el-input v-model="formInlines.productmodel"></el-input>
            </el-form-item>
         </el-form>
                                </el-col>
                        <el-col :span="5">
         <el-form  :model="formInlines" class="demo-form-inline" label-width="80px">
               <el-form-item label="图纸编号">
              <el-input v-model="formInlines.drawingsno"></el-input>
       
            </el-form-item>
         </el-form>
                        </el-col>
      
                     <el-col :span="5">
         <el-form :model="formInlines" class="demo-form-inline" label-width="80px">
                <el-form-item label="产品描述">
              <el-input v-model="formInlines.describe"></el-input>
            </el-form-item>
          
         </el-form>
             </el-col>
            
                    <el-col :span="8">
         <el-form :model="formInlines" class="demo-form-inline" label-width="80px">
                <el-form-item label="计量单位">
              <el-input v-model="formInlines.unit" >米</el-input>
               <el-checkbox v-model="checked">作为计量标准</el-checkbox>
            </el-form-item>
         </el-form>
                    </el-col>

          </el-row>
        </div>
       
   </div>
  <div class="body">
      <div class="left">
        <div class="lt">
          <span>产品图片</span>
        </div>
        <div class="form-left">

                  <el-upload
                class="avatar-uploader"
                action="/apis/PublicAPI.asmx/UpImg"
                :show-file-list="false"
            
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload> 
              
        </div>
      </div>
            <div class="middle">
                  <div class="lt">
          <span class="span">检具信息</span>
         <div class="form_left">
           <el-form :ref="form" :model="formss"  :inline="true"  class="demo-form-inline" >
             <el-form-item label="数量[套]" style="width:55%">
               <el-input v-model="formss.jianjushuliang" style="margin-top:10px"></el-input>
             </el-form-item>
             <el-form-item label="承制方" style="width:40%">
              <el-input v-model="formss.chengzhifang"  style="margin-top:10px" ></el-input>
             </el-form-item>
           </el-form>
         </div>
        </div>
 
      </div>
      <div class="right">
           <div class="lt">
          <span>产品图纸</span>
        </div>
        <div class="form-left">

                  <el-upload
                class="avatar-uploader"
                action="/apis/PublicAPI.asmx/UpImg"
                :show-file-list="false"
              
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl2" :src="imageUrl2" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload> 
              
        </div>
      </div>
  </div>
      <div class="kuang_3">

      

      <div class="lt">
          <span> 制件信息</span>
        </div>
    
        <div class="form_pro">
         <el-form :inline="true" :model="formInline_z" class="demo-form-inline" label-width="80px">
           <div class="f1">
              <el-form-item label="序号">
              <el-input v-model="formInline_z.xuhao"></el-input>
            </el-form-item>
                <el-form-item label="整车用件">
              <el-input v-model="formInline_z.yongjian" ></el-input>
              
            </el-form-item>
              
                   
       
           </div>
           <div class="f2">
               <el-form-item label="料厚">
              <el-input v-model="formInline_z.liaohou"></el-input>
            </el-form-item>
               <el-form-item label="长">
              <el-input v-model="formInline_z.chang"></el-input>
       
            </el-form-item>
           </div>
           <div class="f3">
              <el-form-item label="制件重量" >
              <el-input v-model="formInline_z.height"></el-input>
                           
            </el-form-item>
           
                <el-form-item label="宽">
              <el-input v-model="formInline_z.kuan"></el-input>
            </el-form-item>
           </div>
            <div class="f4">
            <el-form-item label="整车用量">
              <el-input v-model="formInline_z.yongliang"></el-input>
            </el-form-item>
            <el-form-item label="高">
              <el-input v-model="formInline_z.gao"></el-input>
            </el-form-item>
            </div>
         </el-form>
       </div>
        </div>
   <div class="body">
     <div class="bot-left">
         <div class="lt">
          <span> 原料信息</span>
        </div>
        <el-table :data="tableData" height="180">
          <el-table-column align="center" type="index" label="序号" prop="xuhao">
       
          </el-table-column>
          <el-table-column align="center" label="原料名称">
         <template slot-scope="scope">
              <el-input v-model="scope.row.rawname"  style="width:100px" >
 
              </el-input>
          </template>
          </el-table-column>
          <el-table-column align="center" label="原料料号">
            <template slot-scope="scope">
           
              <el-input v-model="scope.row.rawno" style="width:100px" ></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="原料数量">
            <template slot-scope="scope">
                <el-input v-model="scope.row.number" style="width:100px"></el-input>
            </template>
          </el-table-column>
            <el-table-column align="center" label="领料率">
            <template slot-scope="scope">
                <el-input v-model="scope.row.lingliaolv" style="width:100px"></el-input>
            </template>
          </el-table-column>
     
        </el-table>
          </div>
    
     <div class="bot-right">
         <div class="lt">
          <span> 模具信息</span>
         </div>
  

       <el-table :data="tableDatas" height="180" >
          <el-table-column align="center" type="index" label="序号" prop="xuhao">
       
          </el-table-column>
          <el-table-column align="center" label="模具名称">
         <template slot-scope="scope" > 
              <el-input v-model="scope.row.mouldname"  style="width:80px">
         
              </el-input>
          </template>
          </el-table-column>

             <el-table-column align="center" label="长">
            <template slot-scope="scope">
                <el-input v-model="scope.row.chang" style="width:80px"></el-input>
            </template>
          </el-table-column>
             <el-table-column align="center" label="宽">
            <template slot-scope="scope">
                <el-input v-model="scope.row.kuan" style="width:80px"></el-input>
            </template>
          </el-table-column>
             <el-table-column align="center" label="高">
            <template slot-scope="scope">
                <el-input v-model="scope.row.gao" style="width:80px"></el-input>
            </template>
          </el-table-column>
             <el-table-column align="center" label="数量">
            <template slot-scope="scope">
                <el-input v-model="scope.row.number" style="width:80px"></el-input>
            </template>
          </el-table-column>
    
       </el-table>
           </div>
     </div>
   
     <div class="bottom">
       <div class="lt">
          <span> 工序流程</span>
         </div>
    <div class="el-table-bot">
       <el-table :data="tableDatass" height="500">
          <el-table-column align="center" label="工序" >
           <template slot-scope="scope">
                <el-input v-model="scope.row.steps" @focus="show(scope.row)"></el-input>
         

          </template>
          </el-table-column>
          <el-table-column align="center" label="工艺名称">
                <template slot-scope="scope">
                <el-input v-model="scope.row.processname" ></el-input>
         

          </template>
          </el-table-column>
   
       </el-table>
    </div>
    <!-- 工序弹框 -->
    <el-dialog
        :visible.sync="dialogVisible"
        width="75%"
        style="margin-left:45%"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
      >
     
        <div class="lt">
          <span>基本信息</span>
        </div>
        <div class="el-form-bot">
          <el-row :gutter="10">
            <el-col :span="10">
              <el-form :model="formInlines_1" class="demo-form-inline" label-width="80px">
                <el-form-item label="工艺名称">
                  <el-input v-model="formInlines_1.processname" style="width:95%"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="10">
              <el-form :model="formInlines_1" class="demo-form-inline" label-width="80px">
                <el-form-item label="领料类型">
          
                  <el-input v-model="formInlines_1.lingliaotype" style="width:95%"></el-input>
                </el-form-item>
              </el-form>
            </el-col>

            <el-col :span="10">
              <el-form :model="formInlines_1" class="demo-form-inline" label-width="80px">
                <el-form-item label="时产能">
                  <el-input v-model="formInlines_1.shichanneng" style="width:95%"></el-input>
                </el-form-item>
              </el-form>
            </el-col>

            <el-col :span="10">
              <el-form :model="formInlines_1" class="demo-form-inline" label-width="80px">
                <el-form-item label="报废率">
                  <el-input v-model="formInlines_1.baofeilv" style="width:95%"></el-input>
                </el-form-item>
              </el-form>
            </el-col>

            <el-col :span="10">
              <el-form :model="formInlines_1" class="demo-form-inline" label-width="80px">
                <el-form-item label="设备类型">
               <el-input v-model="formInlines_1.equiptype"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="10">
              <el-form :model="formInlines_1" class="demo-form-inline" label-width="80px">
                <el-form-item label="设备名称">
                 <el-input v-model="formInlines_1.equipname"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="10">
              <el-form :model="formInlines_1" class="demo-form-inline" label-width="80px">
                <el-form-item label="注意事项">
                  <el-input v-model="formInlines_1.zysx" type="textera" style="width:270%;"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
        <div class="lt_1">
          <span>原料信息</span>
        </div>

        <div id="table_bot">
          <el-table :data="tableData_yl" height="150">
            <el-table-column align="center" type="index" label="序号" prop="xuhao"></el-table-column>
      
                  <el-table-column align="center" label="原料名称">
              <template slot-scope="scope">
                <el-input v-model="scope.row.rawname"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="原料料号">
              <template slot-scope="scope">
                <el-input v-model="scope.row.rawno" style="width:90px"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="原料数量">
              <template slot-scope="scope">
                <el-input v-model="scope.row.number" style="width:90px"></el-input>
              </template>
            </el-table-column>
         
          </el-table>
        </div>
      
    
      </el-dialog>
       <!-- <div class="div_right">
          <div class="lt">
          <span> 基本信息</span>
         </div>
       <div class="el-form-bot">
   <el-row :gutter="10">
           <el-col :span="10">
      
         <el-form  :model="formInlines_1" class="demo-form-inline" label-width="80px">
 
              <el-form-item label="工艺名称">
              <el-input v-model="formInlines_1.processname" style="width:80%"></el-input>
            </el-form-item>
         </el-form>
           </el-col>
           <el-col :span="10">
      
         <el-form  :model="formInlines_1" class="demo-form-inline" label-width="80px">
    <el-form-item label="领料类型">
            <el-input v-model="formInlines_1.lingliaotype" placeholder="" style="width:80%">
    
             </el-input>
            </el-form-item>
         </el-form>
           </el-col>


           <el-col :span="10">
      
         <el-form  :model="formInlines_1" class="demo-form-inline" label-width="80px">
         <el-form-item label="时产能">
              <el-input v-model="formInlines_1.shichannneng" style="width:80%"></el-input>
              
            </el-form-item>
         </el-form>
           </el-col>

          <el-col :span="10">
      
         <el-form  :model="formInlines_1" class="demo-form-inline" label-width="80px">
                <el-form-item label="报废率">
              <el-input v-model="formInlines_1.baofeilv" style="width:80%"></el-input>
       
            </el-form-item>
         </el-form>
          </el-col>

            <el-col :span="10">
      
         <el-form  :model="formInlines_1" class="demo-form-inline" label-width="80px">
                  <el-form-item label="设备类型" >
             <el-input v-model="formInlines_1.equipmentype" placeholder="" style="width:80%">
          
             </el-input>
       
            </el-form-item>
         </el-form>
            </el-col>
              <el-col :span="10">
      
         <el-form :model="formInlines_1" class="demo-form-inline" label-width="80px">
             <el-form-item label="设备名称">
                <el-input v-model="formInlines_1.equipmentname" placeholder="" style="width:80%">
     
             </el-input>
       
            </el-form-item>
         </el-form>
              </el-col>
 <el-col :span="10">
      
         <el-form  :model="formInlines_1" class="demo-form-inline" label-width="80px">
   <el-form-item label="注意事项">

              <el-input v-model="formInlines_1.zysx"  
              
              type="textera"
              style="width:255%;"></el-input>
              
            </el-form-item>
  
         </el-form>
 </el-col>
         </el-row>
       </div>
    <div class="lt_1">
          <span> 原料信息</span> 
         </div> 

   <div id="table_bot">
        
        
        
       <el-table :data="tableData_yl"  height="150"   >
                 <el-table-column align="center" type="index" label="工序" prop="steps">
       
          </el-table-column>
          <el-table-column align="center" label="原料名称">
              <template slot-scope="scope">
              <el-input v-model="scope.row.rawname" style="width:80px"></el-input>
            </template>
          </el-table-column>
    <el-table-column align="center" label="原料料号">
              <template slot-scope="scope">
              <el-input v-model="scope.row.rawno" style="width:80px"></el-input>
            </template>
          </el-table-column>
              <el-table-column align="center" label="原料数量">
              <template slot-scope="scope">
              <el-input v-model="scope.row.number" style="width:80px"></el-input>
            </template>
          </el-table-column>
           <el-table-column label="操作" align="center">
            <template slot-scope="scope">
                         
                <el-button v-show="scope.$index == 0" size="small" :type="aaa"  @click="caozuo_3(scope)">{{scope.row.BtnName}}</el-button>
              <el-button size="small" v-show="scope.$index !== 0" :type="bbb"  @click="caozuo_3(scope)">{{scope.row.BtnName}}</el-button>
            </template> 
          </el-table-column> 
       </el-table>
   </div>-->
         
       </div> 
        </div>
    
       <div class="btn_bottom">
           <el-button type="primary" size="medium" @click="queDing">确定</el-button>
           <el-button type="info" size="medium" @click="quXiao">返回</el-button>
          </div>  
 </div>
  
  
</template>

<script>
import axios from 'axios'
export default {
  
    data(){
      return{
           leibie:{},
         dialogVisible:false,

        formInlines:{
       productname:''
      
        },
        formInlines_1:{
     
        },
        formInline_z:{
 
        },
          checked:'true',
          imageUrl: '',
          imageUrl2:'',


        valuesss:'',
        valuess:'',
        value:'',
        form: {
          model:''
      },
      forms: {
        yname:''
      },
      formss:{
        picNumber:''
      },
         tableData: [
        {
          xuhao:'1',
       RowMaterial:'',
       RowMaterialType:'',
       unit:'',
       usage:'',

        }
      ],
      tableDatas:[{
          xuhao:'1',
          length:'',
          width:'',
          height:'',
          amount:'',

      }
       

      ],
      tableDatass:[
        {
          xuhao:'1',
        gyname:'',

        }
        ],

      tableData_yl:[

      ],


      }
    },
created() {
   this.Id=this.$route.query.id;
   
   this.getDetail()
  },
    methods:{
      //产品详情
      getDetail() {
      
      axios("/apis/ProductManagement.asmx/Det_Product?index=1&jsondata=" + this.Id).then(
        ({ data }) => {
          var datas = this.$x2js.xml2js(data);
          console.log(datas)
          var list = JSON.parse(datas.string.__text);
              console.log(list);
      //     //产品信息
   
         this.formInlines=list.product_det;
    
this.formInlines.productname=this.$route.query.proname;
this.formInlines.producttype=this.$route.query.protype;
this.formInlines.unit=this.$route.query.unit;
      //   //弹框
      // this.formInline=list.sour1;

      //     //产品图片  
         this.imageUrl=list.product_det.picpath;
      //     //产品图纸
        this.imageUrl2=list.product_det.drawingspath;
         //检具信息
         this.formss=list.product_det;
         //制件信息
         this.formInline_z=list.product_det
         //原料信息
      this.tableData=list.raws;

         //模具信息
  this.tableDatas=list.moulds;
         //工艺流程
this.tableDatass=list.processes;
         

          
        }
      )
      },
      //弹框
      show(obj){
        this.dialogVisible=true;
        console.log(obj)
        var obj={
          productno:this.Id,
          steps:obj.steps

        }
           var objs = JSON.stringify(obj);
          axios("/apis/ProductManagement.asmx/Det_Product?index=11&jsondata=" + objs).then(
        ({ data }) => {
          var datas = this.$x2js.xml2js(data);
          console.log(datas)
          var list = JSON.parse(datas.string.__text);
              console.log(list);
              this.formInlines_1=list.mess;
              this.tableData_yl=list.raws;

        }
          )
      },
         Fh(){
          window.history.go(-1);
      },
        queDing(){
     window.history.go(-1);
   },
   quXiao(){
     window.history.go(-1);
   },
      
    //产品图片
    handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      //产品图纸
      handleAvatarSuccess2(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {

        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
      },
          
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.content{
  width:100%;
  height: 800px;
  overflow: auto;
}
.side_1{
    width:5px;
    height: 16px;
    background-color:$Header_color;
    margin-left: 10px;
    margin-top: 20px;
}
.add_1{
   margin-left: 20px;
  margin-top: -20px;
   float: left;
   font-size: 18px;
   font-weight: 400

}
.btn_fanhui{
    margin-top: -20px;
   margin-right: 20px;
    float:right;
}
.head{
  
    width: 98%;
    height: 250px;
    background-color: $white;
    margin-left: 10px;
    margin-top: 30px;
    overflow: hidden;
    border: 1px solid $bordercolor;
    margin-bottom: 20px;
      border-radius: 5px;

}
.color_box {
  width: 5px;
  height: 20px;
  background-color: $Header_color;
  position: absolute;
  top: 22px;
  left: 10px;
}
.body{
  overflow: hidden;
  margin-bottom: 20px;
  margin-left: 10px;
  width: 98%;
}
.left {
  background-color: $white;
  display: inline-block;
  border-radius: 5px;
  width: 20%;
  height: 300px;
  border: 1px solid $bordercolor;

}
.middle{
    background-color: $white;
  //display: inline-block;
  float:right;
  border-radius: 5px;
  width: 56%;
  height: 300px;
  border: 1px solid $bordercolor;
  margin-left: 15px;
}
.right {
  width: 20%;
  float: right;
  background-color: $white;
  border-radius: 5px;
  height: 300px;
  border: 1px solid $bordercolor;
 
}
.lt {
  height: 60px;
  line-height: 60px;
  width:90%;
  margin-left: 20px;
  border-bottom: 1px solid $bordercolor;
  margin-bottom: 40px;
  font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
font-weight: bold;
font-style: normal;
font-size: 14px;
}
 .lt .span {
  margin-left: 20px;
}
.bot-left{
    background-color: $white;
  display: inline-block;
  border-radius: 5px;
  width: 48%;
  height: 300px;
  border: 1px solid $bordercolor;
}
.bot-right{
    width: 51%;
  float: right;
  background-color: $white;
  border-radius: 5px;
  height: 300px;
  border: 1px solid $bordercolor;
}
.form_pro{
  padding-left: 25px;
}
.kuang_3{
      width: 98%;
    height: 250px;
    background-color: $white;
    margin-left: 10px;
    overflow: hidden;
    border: 1px solid $bordercolor;
    margin-bottom: 20px;
      border-radius: 5px;
}
// .el-select {
//   width: 75% !important;
// margin-right: 10px;

// }
.footer{
  margin-left:35%;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .form_left{

    font-weight: normal;
     margin-top: 15px;
     margin-left: 20px;
  }
  .wbadd {
  float: right;
  margin-right: 20px;
  text-align: center;
  //margin-top: 10px;
}
.el-table{
  margin-left: 30px;
  margin-top: -25px;
  width:95%;
}
.btn_bottom{
  margin-top: 15px;
  margin-left: 45%;
}

.f1,

.f3{
    width: 28%;
  float: left;
}
.f2,
.f4{
  width:22%;
  float: left;
}
.el-input{
  width:150px
}
.bottom{
     width: 98%;
    // height: 400px;
    background-color: $white;
    margin-left: 10px;
    margin-top: 15px;
    overflow: hidden;
    border: 1px solid $bordercolor;
    margin-bottom: 15px;
      border-radius: 5px;
      
}
.div_right{
   width: 43%;
    height: 666px;
border:1px solid $bordercolor;
float: right;
margin-right:50px;
margin-top: -20px;
background-color:rgb(242, 242, 242);
margin-bottom: 10px;

}
.el-table-bot{
   width: 45%;
   height: 380px;
   display: inline-block;

}
.el-form-bot{
  width:98%;
  height:35%;
 
}
.f7,
.f8
{
      width: 50%;
  float: left;
}

#table_bot{
    width:95%;
  height: 320px;

}
// .table_yl{
//   background-color:rgb(242, 242, 242);

// }
.lt_1 {
  height: 60px;
  line-height: 60px;
  width:90%;
  margin-left: 20px;
  border-bottom: 1px solid $bordercolor;
  margin-bottom: 40px;
  font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
font-weight: bold;
font-style: normal;
font-size: 14px;
clear: both;
}

</style>
<style >
#table_bot .el-table th {
  background:rgb(242, 242, 242);
}
</style>